<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>混合体系统</title>
    <link rel="stylesheet" th:href="@{/el/element.css}">
    <script th:src="@{/js/vue.js}" type="text/javascript"></script>
    <!--    <script th:src="@{https://unpkg.com/element-ui/lib/index.js}" type="text/javascript"></script>-->
    <script th:src="@{/el/element.js}" type="text/javascript"></script>
    <script th:src="@{/js/axios.js}" type="text/javascript"></script>
    <script th:src="@{/js/wangEditor.min.js}" type="text/javascript"></script>
    <style>
        /*登录div的设置*/
        body{
            background-image:url(/img/login.jpg);
            background-size: cover;
            -webkit-background-size: cover;
            -o-background-size: cover;
        }
        .myTitle {
            width: 200px;
            /*绝对定位的方式*/
            position: absolute;
            /*定位登录div的位置*/
            left: 58%;
            top: 23%;
            transform: translate(-23%, -58%);
            /*内边距*/
            padding-top: 20px;
            padding-left: 10px;
            padding-right: 10px;
        }

        .myFooter {
            width: 360px;
            /*绝对定位的方式*/
            position: absolute;
            /*定位登录div的位置*/
            left: 92%;
            top: 95%;
            transform: translate(-95%, -95%);
        }
        .myLogin {
            width: 300px;
            /*绝对定位的方式*/
            position: absolute;
            /*定位登录div的位置*/
            left: 48%;
            top: 43%;
            transform: translate(-40%, -60%);
            /*内边距*/
            padding-top: 20px;
            padding-left: 10px;
            padding-right: 10px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="myLogin">
        <h2 style="text-align: center">&nbsp;Ding HDX&nbsp;</h2>
        <el-divider></el-divider>
        <div >
            <el-input id="username" v-model="username" placeholder="请输入帐号">
                <template slot="prepend"><i class="el-icon-s-custom"></i></template>
            </el-input>
        </div>

        <div style="margin-top: 20px;">
            <el-input id="password" v-model="password" type="password" placeholder="请输入密码">
                <template slot="prepend"><i class="el-icon-unlock"></i></template>
            </el-input>
        </div>

        <div  style="margin-top: 30px;">
            <el-button id="login" v-on:click="goLogin()" style="width:100%" type="danger" plain>登录</el-button>
            <br>
            <el-button v-on:click="dialogFormVisible=true" style="width:100%;margin-top: 5px" type="primary" plain>注册用户</el-button>
        </div>
        <hr>

    </div> <!-- mylogin -->
    <el-dialog title="注册" :visible.sync="dialogFormVisible">
        <el-form :model="user">
            <el-form-item label="用户名" :label-width="formLabelWidth">
                <el-input v-model="user.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth">
                <el-input v-model="user.password" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addUser()">确 定</el-button>
        </div>
    </el-dialog>

    <div class="myFooter">
        <h5> Copyright © 2018-2025 叮叮信息科技 版权所有 </h5>
    </div>
</div> <!-- app -->
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            username: 'tom',
            password: '123456',
            formLabelWidth:"120px",
            user:{
                username:"",
                password:"",
            },
            dialogFormVisible:false,
        },
        methods: {
            goLogin() {
                var that = this;
                var vdata={username:this.username,password:this.password,};  //JS 对象写法
                axios({
                    url:"/dologin",
                    method: "post",
                    headers:{ 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
                    params: vdata
                }).then(function (response) {
                    console.log(response)
                    console.log(response.data);
                    if (response.data.code == 0 ) {
                        that.$message({
                            showClose: true,
                            offset: 100,
                            message: "登录成功",
                            type: 'warning'
                        });
                        var path = response.data.action
                        if (document.cookie.length>0&&document.cookie.indexOf("path")>=0)
                        {
                            path=document.cookie.split("=")[1];
                        }

                        top.location.href = path
                    } else {
                        that.$message({
                            showClose: true,
                            offset: 100,
                            message:"请重新登录~",
                            type: 'error'
                        });
                    }

                })
            },
            addUser(){
                var that=this
                console.log(this.user)
                axios.post("/login/addUser",this.user).then(resp=>{
                    if (resp.data){
                        this.$message({
                            showClose: true,
                            offset: 100,
                            message: "注册完毕",
                            type: 'success'
                        });
                    }else
                    {
                        this.$message().error("注册失败啦！")
                    }

                })
                this.dialogFormVisible=false;
                this.user={};

            }
        },
        mounted(){
            this.$message({
                showClose: true,
                offset: 100,
                duration:1500,
                message: "登录后可进行更多操作~",
                type: 'warning'
            });
        }

    })
</script>
</html>